<template>
  <div class="index">
    <div class="index-left">
      <el-menu
        class="el-menu-vertical-demo"
        unique-opened
        background-color="#FFCCCC"
        router
        :default-active="pathname"
        @select="selection"
      >
        <!-- @select='函数名' 树菜单改变时触发 -->
        <!-- 上面动态设置hash路径 -->
        <h3 class="center">
          <span class="el-icon-dish-1"></span>
          老雷火锅后台
        </h3>
        <div v-for="obj in treelist" :key="obj.index">
          <!-- 可展开的菜单儿子 -->
          <el-submenu v-if="obj.children" :index="obj.index">
            <template slot="title">
              <i :class="obj.i"></i>
              <span>{{ obj.text }}</span>
            </template>
            <!-- 儿子，应该循环当前数据的obj.children数组 -->
            <el-menu-item
              v-for="child in obj.children"
              :key="child.index"
              :index="child.index"
              >{{ child.text }}</el-menu-item
            >
          </el-submenu>
          <!-- 无法展开直接点击的菜单儿子 -->
          <el-menu-item v-else :index="obj.index">
            <i :class="obj.i"></i>
            <span slot="title">{{ obj.text }}</span>
          </el-menu-item>
        </div>
      </el-menu>
    </div>
    <div class="index-right">
      <div class="index-right-nav">
        <div>
          <el-breadcrumb separator="/">
            <el-breadcrumb-item v-for="items in breadlist" :key="items">{{
              items
            }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <router-link to="/index/getuser"
          ><div class="index-right-img">
            <span>欢迎你,{{ thisname }}</span>
            <span class="el-icon-arrow-down"></span>
            <span><img :src="thisig" /></span></div
        ></router-link>
      </div>
      <router-view class="index-bc"></router-view>
    </div>
  </div>
</template>

<script>
import { getinfo } from "@/apis/user.js";
import { bus } from "@/utils/utils";
export default {
  data() {
    return {
      // 面包屑数组
      breadlist: [],
      // 设置当前账户的名字和头像
      thisname: "",
      thisig: "",
      // 动态路径名默认为空
      pathname: "",
      treelist: [
        {
          index: "/index/outindex",
          i: "el-icon-price-tag",
          text: "后台首页",
          bread: ["后台首页"],
        },
        {
          index: "/index/order",
          i: "el-icon-document",
          text: "订单管理",
          bread: ["订单管理"],
        },
        {
          index: "3",
          i: "el-icon-shopping-bag-1",
          text: "商品管理",
          children: [
            {
              index: "/index/productlist",
              text: "商品列表",
              bread: ["商品管理", "商品列表"],
            },
            {
              index: "/index/productadd",
              text: "商品添加",
              bread: ["商品管理", "商品添加"],
            },
            {
              index: "/index/producttype",
              text: "商品分类",
              bread: ["商品管理", "商品分类"],
            },
          ],
        },
        {
          index: "/index/shopmanage",
          i: "el-icon-s-shop",
          text: "店铺管理",
          bread: ["店铺管理"],
        },
        {
          index: "5",
          i: "el-icon-user",
          text: "账号管理",
          children: [
            {
              index: "/index/userlist",
              text: "账号列表",
              bread: ["账号管理", "账号列表"],
            },
            {
              index: "/index/adduser",
              text: "添加帐号",
              bread: ["账号管理", "添加帐号"],
            },
            {
              index: "/index/changepwd",
              text: "修改密码",
              bread: ["账号管理", "修改密码"],
            },
          ],
        },
        {
          index: "6",
          i: "el-icon-s-data",
          text: "销售统计",
          children: [
            {
              index: "/index/productsell",
              text: "商品统计",
              bread: ["销售统计", "商品统计"],
            },
            {
              index: "/index/ordersell",
              text: "订单统计",
              bread: ["销售统计", "订单统计"],
            },
          ],
        },
      ],
    };
  },
  // 页面数据创建完毕
  created() {
    // 接收数据,回调函数接收值
    bus.$on("changeimg", (val) => {
      this.thisig = val;
    });
    // 判定当前用户的权限,并进行权限配置
    if (localStorage.role == "normal") {
      this.treelist.splice(3, 2);
    }
    // 将hash值去掉#号之后赋给路径名
    this.pathname = location.hash.replace("#", "");
    // 默认加载页面,将hash值赋给下面的树菜单改变的函数
    this.selection(this.pathname);
    // console.log(location.hash);
    getinfo({
      id: localStorage.getItem("info"),
    }).then((res) => {
      // console.log(res);
      this.thisname = res.data.accountInfo.account;
      this.thisig = res.data.accountInfo.imgUrl;
    });
  },
  methods: {
    // 树菜单改变时触发,有回调值
    selection(index) {
      // console.log(index);
      // 创建一个空数组来装
      let bread = [];
      // 循环上面的树菜单
      for (const obj of this.treelist) {
        // 判定是不是有儿子二级菜单
        if (obj.children) {
          // 有崽子再循环孩子
          for (const child of obj.children) {
            // 如果还是索引和点击时索引一致的话
            if (child.index == index) {
              // 就将bread数组赋给上面的数组
              bread = child.bread;
            }
          }
          // 没有的话
        } else {
          // 就判定没有儿子的菜单hash值
          if (obj.index == index) {
            bread = obj.bread;
          }
        }
      }
      // 将值赋给上面的数组
      this.breadlist = bread;
    },
  },
};
</script>

<style lang="less" scoped>
@import url("../assets/styles/themes.less");
a {
  color: #000;
  text-decoration: none;
}
.el-menu {
  border-right: 0;
}
.index {
  display: flex;
  width: 100%;
  height: 100%;
  .index-left {
    width: 250px;
    box-sizing: border-box;
    background-color: @basecolor;
    background-image: url(../assets/imgs/bcimg.png);
    background-size: 250px;
    background-repeat: no-repeat;
    background-position: bottom;
    .center {
      text-align: center;
      width: 100%;
      line-height: 50px;
      white-space: nowrap;
      margin-top: 10px;
      .el-icon-dish-1 {
        background-color: #7bbdff;
        font-size: 24px;
        line-height: 40px;
        width: 40px;
        border-radius: 50%;
      }
    }
  }
  .index-right {
    display: flex;
    flex-direction: column;
    background-color: #f0f2f5;
    width: 100%;
    .index-bc {
      background-image: url(../assets/imgs/2Am3JM0NYn.jpg);
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
    .index-right-nav {
      display: flex;
      justify-content: space-between;
      background-color: #fff;
      padding: 0 30px;
      align-items: center;
      height: 60px;
      box-sizing: border-box;
      .el-icon-arrow-right {
        margin: 0 10px;
        color: #ccc;
      }
      .el-icon-arrow-down {
        margin: 0 10px;
        color: #ccc;
      }
      .index-right-img {
        display: flex;
        align-items: center;
        img {
          width: 60px;
          height: 60px;
          border-radius: 50%;
        }
      }
    }
  }
}
</style>